<template>
	<view class="cancel">
		<view class="title">您确认要停止售卖并下架以下商品吗？</view>
		<image :src="data_info.product_cover" class="cover"></image>
		<view class="name">{{data_info.product_name}}</view>
		<!-- <view class="number">
			<view>#101010</view>
		</view> -->
		<view class="price">出售价: ${{data_info.price}}</view>
		<view class="btn_view">
			<view @click="submit">确定下架</view>
			<view @click="close">我再想想</view>
		</view>
	</view>
</template>

<script setup>
	import {
		orderInfo,
		orderCancel
	} from "@/request/api";
	import {
		ref
	} from "vue";
	const props = defineProps({
		id: [String, Number]
	});
	const emit = defineEmits(["close", "reload"]);

	const data_info = ref({});
	const getDeta = async () => {
		let {
			info,
			setting
		} = await orderInfo({
			id: props.id
		});
		data_info.value = info;
	};
	getDeta();

	const submit = async () => {
		await orderCancel({
			id: props.id
		});
		uni.$uv.toast("操作成功");
		setTimeout(() => emit("reload"), 1500);
	};

	const close = () => emit("close");
</script>

<style scoped lang="scss">
	.cancel {
		width: 600rpx;
		border-radius: 20rpx;
		padding: 0 44rpx 40rpx;
		box-sizing: border-box;
		background: #2F2F2F;

		.title {
			height: 106rpx;
			line-height: 106rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
		}

		.cover {
			display: block;
			width: 480rpx;
			height: 480rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			background: #444444;
		}

		.name {
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 800;
			padding-top: 32rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
		}

		.number {
			display: flex;

			view {
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: 400;
				border-radius: 5rpx;
				padding: 0 12rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.1);
			}
		}

		.price {
			color: #DDF247;
			font-size: 30rpx;
			padding: 20rpx 0 35rpx;
			box-sizing: border-box;
		}

		.btn_view {
			display: flex;
			justify-content: space-between;

			view {
				width: 240rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #444444;

				&:last-child {
					color: #333333;
					background: #DDF247;
				}
			}
		}
	}
</style>